import {
  Body,
  Container,
  Head,
  Heading,
  Html,
  Preview,
  Section,
  Text,
} from "@react-email/components";

interface OTPVerifyEmailProps {
  verificationCode?: string;
}

export function OTPVerifyEmail({ verificationCode }: OTPVerifyEmailProps) {
  return (
    <Html>
      <Head />
      <Body style={main}>
        <Preview>Email Verification</Preview>
        <Section style={upperSection}>
          <Heading style={h1}>Verify your email address</Heading>
          <Section style={verificationSection}>
            <Text style={codeText}>{verificationCode}</Text>
            <Text style={validityText}>This code is valid for 10 minutes</Text>
          </Section>
        </Section>
      </Body>
    </Html>
  );
}

const main = {
  backgroundColor: "#f0f0f0",
  color: "#212121",
};

const h1 = {
  color: "#606060",
  fontFamily:
    "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif",
  fontSize: "20px",
  fontWeight: "bold",
  marginBottom: "15px",
};

const text = {
  color: "#606060",
  fontFamily:
    "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif",
  fontSize: "14px",
  margin: "24px 0",
};

const upperSection = { padding: "25px 35px" };

const codeText = {
  ...text,
  fontWeight: "bold",
  fontSize: "36px",
  margin: "10px 0",
  textAlign: "left" as const,
};

const validityText = {
  ...text,
  margin: "0px",
  textAlign: "left" as const,
};

const verificationSection = {
  display: "flex",
  alignItems: "left",
  justifyContent: "left",
};
